<template>
  <div >
    <div class="seeImg">
        <ul>
          <li style="width:100%">
            <p>全景照</p>
            <div :id="quanId" class="imgBox" style="width:100%;height:500px"></div>
          </li>
          <li v-for="(item,index) in imgArr" class="imgArrClass" :key="index">
            <p>{{item.fileName}}</p>
            <img :src="$https+item.filePath" />
          </li>
          <li style="width:100%" v-if="imgArr.length==0">
            <p class="noData">暂无方位图</p>
          </li>
        </ul>
      </div>
  </div>
</template>

<script>
import PhotoSphereViewer from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
export default {
  name: "seeImg",
  props: ["imgArr",'quanTu'],
  data() {
    return {
      quanUrl: require("@/assets/panorama.jpg"),
      quanId:'quanId',
    };
  },
  watch: {
    
  },
  created() {
    console.log(this.quanTu,'panoramaImg')
  },
  mounted(){
    PhotoSphereViewer({
      panorama: this.quanTu==''|| this.quanTu==null?this.quanUrl:this.$https+this.quanTu,
      container: this.quanId,
      autoload:true,
      time_anim: 3000,
      navbar: true,
      time_anim:'0.4rpm',
      navbar_style: {
        backgroundColor: "rgba(58, 67, 77, 0.7)"
      }
    });
  },
  methods: {
    
  },
  
};
</script>

<style lang="scss" scoped>
.seeImg {
  text-align: center;
  overflow: hidden;
}
.seeImg ul{
  overflow: auto;
}
.seeImg ul,
.seeImg li {
  list-style: none;
}
.seeImg li {
  float: left;
}
.seeImg li img {
  width: 400px;
  height: 400px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.noData{
  text-align: center;
  font-size: 22px;
  color: #333;
  margin-top: 20px;
}

</style>
